import React, { useState, useEffect } from "react";
import request from "../../api/request";
import style from "./index.module.css";
import { Card } from "antd-mobile";
import { InfiniteScroll, List } from 'antd-mobile'
function Index() {
  // 科普数据
  const [books, setBooks] = useState<any[]>([]);
  const [pageCode, setPageCode] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  
  const [hasMore, setHasMore] = useState(true)

  const getBooks = async () => {
    const res = await request.get("/api/search", {
      params: {
        pageCode,
        pageSize,
      },
    });
    console.log("科普数据", res);
    if (res.code === 20000) {
      setBooks([...books,...res.data.book]);
      setPageCode(pageCode + 1);
    }
    if(res.data.book.length === 0){
      setHasMore(false)
    }
  };

  useEffect(() => {
    getBooks();
  }, []);
  return (
    <div>
      <Card className={style.card1}>
        <div className={style.text}>
            <span>共找到相关数据{<span className={style.green}>2000</span>}条</span>
        </div>
        
        {books.length > 0 &&
          books.map((item, index) => (
            <div key={index} className={style.cardBox1}>
              <span className={style.texttitle}>{item.texttitle}</span>
              <p className={style.textdescword}>{item.textdescword}</p>
              <div className={style.textdess}>

                <div className={style.textdes}>
                  <span>聂里红</span> | <span>{item.textdise?.substring(0, 12)}</span>
                  <span>消化科</span>
                </div>

                <span className={style.textright}>{item.texttype}</span>
              </div>
            </div>
          ))}
           <InfiniteScroll loadMore={getBooks} hasMore={hasMore} />
      </Card>
    </div>
  );
}

export default Index;
